<template>
  <div class="health-record">
    <div class="header">
      <span class="back-arrow" @click="back()">&lt;</span>
      <span class="title">健康档案</span>
      <span class="save-button" @click="addc()">保存</span>
    </div>
    <div class="content">
      <div class="required-section">
        <div class="box">
          <span class="section-title">*以下为必填项</span>
        </div>
        <div class="eri">
          <van-field
            v-model="fieldValuea"
            is-link
            clearable
            readonly
            label="关系"
            placeholder="选择关系"
            :value="fieldValuea"
            :clickable="true"
            @click="showPickera = true"
            style="width: 100%"
          />
          <van-popup v-model:show="showPickera" destroy-on-close round position="bottom">
            <van-picker
              :model-value="pickerValuea"
              :columns="columna"
              @cancel="showPickera = false"
              @confirm="onConfirma"
            />
          </van-popup>
        </div>
        <van-divider />
        <div class="item">
          <span class="label">姓名</span>
          <input type="text" class="input-placeholder" placeholder="请输入姓名" v-model="name" />
        </div>
        <van-divider />
        <div class="item gender-item">
          <span class="label">性别</span>
          <van-radio-group v-model="checked" direction="horizontal">
            <van-radio name="1" id="male">男</van-radio>
            <van-radio name="2" id="female">女</van-radio>
          </van-radio-group>
        </div>
        <van-divider />
        <div class="item">
          <van-field
            v-model="fieldValueb"
            is-link
            clearable
            readonly
            label="出生日期"
            placeholder="请选择"
            :clickable="true"
            @click="showPickerb = true"
            :value="date"
            style="width: 100%"
          />
          <van-popup v-model:show="showPickerb" destroy-on-close round position="bottom">
            <van-date-picker
              v-model="currentDate"
              title="选择日期"
              :min-date="minDate"
              :max-date="maxDate"
              :model-value="pickerValueb"
              @cancel="showPickerb = false"
              @confirm="onConfirmb"
            />
          </van-popup>
        </div>
      </div>
      <van-divider />
      <div class="optional-section">
        <div class="box">
          <span class="section-title">以下为选填项</span>
        </div>
        <van-divider />

        <div class="item">
          <span class="label">手机号</span>
          <input type="text" class="input-placeholder" placeholder="请输入手机号" v-model="phone" />
        </div>
        <van-divider />
        <div class="item">
          <span class="label">身份证号</span>
          <input
            type="text"
            class="input-placeholder"
            placeholder="请输入身份证号"
            v-model="value"
          />
        </div>
        <van-divider />

        <div class="item">
          <span class="label">身高</span>
          <input type="text" class="input-placeholder" placeholder="请输入身高" v-model="height" />
        </div>
        <van-divider />

        <div class="item">
          <span class="label">体重</span>
          <input type="text" class="input-placeholder" placeholder="请输入kg" v-model="weight" />
        </div>
        <van-divider />

        <div class="item">
          <span class="label">BMI</span>
          <span class="input-description">{{ abmi }}</span>
        </div>
        <van-divider />

        <div class="item">
          <van-field
            v-model="fieldValuec"
            is-link
            clearable
            readonly
            label="腰围"
            placeholder="请选择"
            :value="fieldValuec"
            :clickable="true"
            @click="showPickerc = true"
            style="width: 100%"
          />
          <van-popup v-model:show="showPickerc" destroy-on-close round position="bottom">
            <van-picker
              :model-value="pickerValuec"
              :columns="columnc"
              @cancel="showPickerc = false"
              @confirm="onConfirmc"
            />
          </van-popup>
        </div>
      </div>
    </div>
    <div class="opt-section">
      <div class="box"></div>
      <div class="item">
        <van-field
          v-model="fieldValuee"
          is-link
          clearable
          readonly
          label="吸烟史"
          placeholder="请选择"
          :value="fieldValuee"
          :clickable="true"
          @click="showPickere = true"
          style="width: 100%"
        />
        <van-popup v-model:show="showPickere" destroy-on-close round position="bottom">
          <van-picker
            :model-value="pickerValuee"
            :columns="columne"
            @cancel="showPickere = false"
            @confirm="onConfirme"
          />
        </van-popup>
      </div>
      <van-divider />
      <div class="item">
        <van-field
          v-model="fieldValued"
          is-link
          clearable
          readonly
          label="饮酒史"
          placeholder="请选择"
          :value="fieldValued"
          :clickable="true"
          @click="showPickerd = true"
          style="width: 100%"
        />
        <van-popup v-model:show="showPickerd" destroy-on-close round position="bottom">
          <van-picker
            :model-value="pickerValued"
            :columns="columnd"
            @cancel="showPickerd = false"
            @confirm="onConfirmd"
          />
        </van-popup>
      </div>
      <van-divider />
    </div>
    <div class="box"></div>
    <div class="dr">
      <div class="re">
        <h4>肝功能</h4>
        <p><span>正常</span><span>异常</span></p>
      </div>
      <van-divider />
      <div class="re">
        <h4>肾功能</h4>
        <p><span>正常</span><span>异常</span></p>
      </div>
      <van-divider />
      <div class="re">
        <h4>婚姻状况</h4>
        <p><span>未婚</span><span>已婚</span><span>其他</span></p>
      </div>
      <van-divider />
      <div class="re">
        <h4>生育状态</h4>
        <p><span>未生育</span><span>备孕期</span><span>怀孕中</span><span>已生育</span></p>
      </div>
      <van-divider />
    </div>
    <div class="box"></div>
    <div class="dt">
      <div class="res">
        <h4>疾病史</h4>
        <p><span>暂无</span><span>高血压</span><span>糖尿病</span><span>心脏病</span></p>
        <p><span>过敏性疾病</span><span>哮喘</span><span>白癜风</span><span>癫痫</span></p>
        <p><span>其他</span></p>
        <p>
          <input type="text" placeholder="请输入补充内容" style="border: none; margin-left: 30px" />
        </p>
      </div>
      <div class="box"></div>
      <div class="res">
        <h4>家族病史</h4>
        <p><span>暂无</span><span>高血压</span><span>糖尿病</span><span>心脏病</span></p>
        <p><span>脑梗</span><span>白癜风</span><span>癫痫</span><span>哮喘</span></p>
        <p><span>近视</span><span>冠心病</span><span>脑卒中</span></p>
        <p>
          <span>血脂异常</span><span style="width: 130px">慢性阻塞性肺疾病</span><span>癌症</span>
        </p>
        <p><span>结核病</span><span>肺炎</span><span style="width: 100px">严重精神障碍</span></p>
        <p><span>其他</span></p>
        <p>
          <input type="text" placeholder="请输入补充内容" style="border: none; margin-left: 30px" />
        </p>
      </div>
      <div class="box"></div>
      <div class="res">
        <h4>药物过敏</h4>
        <p><span>暂无</span><span>青霉素</span><span>头孢类</span></p>
        <p>
          <span style="width: 100px">破伤风抗毒素</span><span>普鲁卡因</span><span>地卡因</span>
        </p>
        <p><span>磺胺类</span><span>维生素B1</span><span>泛影葡胺</span></p>
        <p><span>阿司匹林</span><span>其他</span></p>
        <p>
          <input type="text" placeholder="请输入补充内容" style="border: none; margin-left: 30px" />
        </p>
      </div>
      <div class="box"></div>
      <div class="res">
        <h4>食物/接触物过敏</h4>
        <p>
          <span>暂无</span><span>芒果</span><span>牛奶</span><span>坚果类</span><span>海鲜</span>
        </p>
        <p><span>黄瓜</span><span>花粉</span><span>油漆</span><span>动物皮毛</span></p>
        <p><span>化妆品</span><span>其他</span></p>
        <p>
          <input type="text" placeholder="请输入补充内容" style="border: none; margin-left: 30px" />
        </p>
      </div>
      <div class="box"></div>
      <div class="res">
        <h4>个人习惯</h4>
        <p><span>低头族</span><span>久坐</span><span>久站</span><span>强忍大小便</span></p>
        <p><span>喝酒</span><span>熬夜</span><span>翘二郎腿</span><span>吸烟</span></p>
        <p><span>饭后卧床</span><span>不常锻炼</span><span>如厕玩手机</span></p>
        <p><span>不喜喝水</span><span>其他</span></p>
        <p>
          <input type="text" placeholder="请输入补充内容" style="border: none; margin-left: 30px" />
        </p>
      </div>
      <van-divider />
    </div>
  </div>
  <van-back-top />
</template>

<script setup lang="ts">
import { ref } from 'vue'
import { useRouter } from 'vue-router'
const router = useRouter()
const back = () => {
  router.go(-1)
}
const checked = ref('1')
const date = ref('')
const name = ref('')
const phone = ref('')
const weight = ref('')
const height = ref('')
const gender = ref('男')
const BMI = ref('')
const value = ref('')
//关系
const columna = [
  { text: '自己', value: '自己' },
  { text: '父母', value: '父母' },
  { text: '子女', value: '子女' },
  { text: '爱人', value: '爱人' },
  { text: '其他', value: '其他' }
]
//出生年份
const currentDate = ref(['2024', '12', '24'])
const minDate = new Date(1900, 0, 1)
const maxDate = new Date(2100, 11, 31)
//腰围
const columnc = [
  { text: '1cm', value: '1' },
  { text: '2cm', value: '2' },
  { text: '3cm', value: '3' },
  { text: '4cm', value: '4' },
  { text: '5cm', value: '5' },
  { text: '6cm', value: '6' },
  { text: '7cm', value: '7' },
  { text: '8cm', value: '8' },
  { text: '9cm', value: '9' },
  { text: '10cm', value: '10' },
  { text: '11cm', value: '11' },
  { text: '12cm', value: '12' },
  { text: '13cm', value: '13' },
  { text: '14cm', value: '14' },
  { text: '15cm', value: '15' },
  { text: '16cm', value: '16' },
  { text: '17cm', value: '17' },
  { text: '18cm', value: '18' },
  { text: '19cm', value: '19' },
  { text: '20cm', value: '20' },
  { text: '21cm', value: '21' },
  { text: '22cm', value: '22' },
  { text: '23cm', value: '23' },
  { text: '24cm', value: '24' },
  { text: '25cm', value: '25' },
  { text: '26cm', value: '26' },
  { text: '27cm', value: '27' },
  { text: '28cm', value: '28' },
  { text: '29cm', value: '29' },
  { text: '30cm', value: '30' },
  { text: '31cm', value: '31' },
  { text: '32cm', value: '32' },
  { text: '33cm', value: '33' },
  { text: '34cm', value: '34' },
  { text: '35cm', value: '35' },
  { text: '36cm', value: '36' },
  { text: '37cm', value: '37' },
  { text: '38cm', value: '38' },
  { text: '39cm', value: '39' },
  { text: '40cm', value: '40' },
  { text: '41cm', value: '41' },
  { text: '42cm', value: '42' },
  { text: '43cm', value: '43' },
  { text: '44cm', value: '44' },
  { text: '45cm', value: '45' },
  { text: '46cm', value: '46' },
  { text: '47cm', value: '47' },
  { text: '48cm', value: '48' },
  { text: '49cm', value: '49' },
  { text: '50cm', value: '50' },
  { text: '51cm', value: '51' },
  { text: '52cm', value: '52' },
  { text: '53cm', value: '53' },
  { text: '54cm', value: '54' },
  { text: '55cm', value: '55' },
  { text: '56cm', value: '56' },
  { text: '57cm', value: '57' },
  { text: '58cm', value: '58' },
  { text: '59cm', value: '59' },
  { text: '60cm', value: '60' },
  { text: '61cm', value: '61' },
  { text: '62cm', value: '62' },
  { text: '63cm', value: '63' },
  { text: '64cm', value: '64' },
  { text: '65cm', value: '65' },
  { text: '66cm', value: '66' },
  { text: '67cm', value: '67' },
  { text: '68cm', value: '68' },
  { text: '69cm', value: '69' },
  { text: '70cm', value: '70' },
  { text: '71cm', value: '71' },
  { text: '72cm', value: '72' },
  { text: '73cm', value: '73' },
  { text: '74cm', value: '74' },
  { text: '75cm', value: '75' },
  { text: '76cm', value: '76' },
  { text: '77cm', value: '77' },
  { text: '78cm', value: '78' },
  { text: '79cm', value: '79' },
  { text: '80cm', value: '80' },
  { text: '81cm', value: '81' },
  { text: '82cm', value: '82' },
  { text: '83cm', value: '83' },
  { text: '84cm', value: '84' },
  { text: '85cm', value: '85' },
  { text: '86cm', value: '86' },
  { text: '87cm', value: '87' },
  { text: '88cm', value: '88' },
  { text: '89cm', value: '89' },
  { text: '90cm', value: '90' },
  { text: '91cm', value: '91' },
  { text: '92cm', value: '92' },
  { text: '93cm', value: '93' },
  { text: '94cm', value: '94' },
  { text: '95cm', value: '95' },
  { text: '96cm', value: '96' },
  { text: '97cm', value: '97' },
  { text: '98cm', value: '98' },
  { text: '99cm', value: '99' },
  { text: '100cm', value: '100' },
  { text: '101cm', value: '101' },
  { text: '102cm', value: '102' },
  { text: '103cm', value: '103' },
  { text: '104cm', value: '104' },
  { text: '105cm', value: '105' },
  { text: '106cm', value: '106' },
  { text: '107cm', value: '107' },
  { text: '108cm', value: '108' },
  { text: '109cm', value: '109' },
  { text: '110cm', value: '110' },
  { text: '111cm', value: '111' },
  { text: '112cm', value: '112' },
  { text: '113cm', value: '113' },
  { text: '114cm', value: '114' },
  { text: '115cm', value: '115' },
  { text: '116cm', value: '116' },
  { text: '117cm', value: '117' },
  { text: '118cm', value: '118' },
  { text: '119cm', value: '119' },
  { text: '120cm', value: '120' },
  { text: '121cm', value: '121' },
  { text: '122cm', value: '122' },
  { text: '123cm', value: '123' },
  { text: '124cm', value: '124' },
  { text: '125cm', value: '125' },
  { text: '126cm', value: '126' },
  { text: '127cm', value: '127' },
  { text: '128cm', value: '128' },
  { text: '129cm', value: '129' },
  { text: '130cm', value: '130' },
  { text: '131cm', value: '131' },
  { text: '132cm', value: '132' },
  { text: '133cm', value: '133' },
  { text: '134cm', value: '134' },
  { text: '135cm', value: '135' },
  { text: '136cm', value: '136' },
  { text: '137cm', value: '137' },
  { text: '138cm', value: '138' },
  { text: '139cm', value: '139' },
  { text: '140cm', value: '140' },
  { text: '141cm', value: '141' },
  { text: '142cm', value: '142' },
  { text: '143cm', value: '143' },
  { text: '144cm', value: '144' },
  { text: '145cm', value: '145' },
  { text: '146cm', value: '146' },
  { text: '147cm', value: '147' },
  { text: '148cm', value: '148' },
  { text: '149cm', value: '149' },
  { text: '150cm', value: '150' },
  { text: '151cm', value: '151' },
  { text: '152cm', value: '152' },
  { text: '153cm', value: '153' },
  { text: '154cm', value: '154' },
  { text: '155cm', value: '155' },
  { text: '156cm', value: '156' },
  { text: '157cm', value: '157' },
  { text: '158cm', value: '158' },
  { text: '159cm', value: '159' },
  { text: '160cm', value: '160' },
  { text: '161cm', value: '161' },
  { text: '162cm', value: '162' },
  { text: '163cm', value: '163' },
  { text: '164cm', value: '164' },
  { text: '165cm', value: '165' },
  { text: '166cm', value: '166' },
  { text: '167cm', value: '167' },
  { text: '168cm', value: '168' },
  { text: '169cm', value: '169' },
  { text: '170cm', value: '170' },
  { text: '171cm', value: '171' },
  { text: '172cm', value: '172' },
  { text: '173cm', value: '173' },
  { text: '174cm', value: '174' },
  { text: '175cm', value: '175' },
  { text: '176cm', value: '176' },
  { text: '177cm', value: '177' },
  { text: '178cm', value: '178' },
  { text: '179cm', value: '179' },
  { text: '180cm', value: '180' }
]
//饮酒史
const columnd = [
  {
    text: '否',
    value: '',
    children: [
      {
        text: '',
        value: '',
        children: [{ text: '', value: '' }]
      }
    ]
  },
  {
    text: '是',
    value: 'true',
    children: [
      {
        text: '1年',
        value: '1',
        children: [
          {
            text: '白酒',
            value: 'a',
            children: [
              { text: '少量', value: '' },
              { text: '适中', value: '' },
              { text: '大量', value: '' }
            ]
          },
          {
            text: '啤酒',
            value: 'b',
            children: [
              { text: '少量', value: '' },
              { text: '适中', value: '' },
              { text: '大量', value: '' }
            ]
          },
          {
            text: '红酒',
            value: 'c',
            children: [
              { text: '少量', value: '' },
              { text: '适中', value: '' },
              { text: '大量', value: '' }
            ]
          },
          {
            text: '均有',
            value: 'd',
            children: [
              { text: '少量', value: '' },
              { text: '适中', value: '' },
              { text: '大量', value: '' }
            ]
          }
        ]
      },
      {
        text: '2年',
        value: '1',
        children: [
          {
            text: '白酒',
            value: 'a',
            children: [
              { text: '少量', value: '' },
              { text: '适中', value: '' },
              { text: '大量', value: '' }
            ]
          },
          {
            text: '啤酒',
            value: 'b',
            children: [
              { text: '少量', value: '' },
              { text: '适中', value: '' },
              { text: '大量', value: '' }
            ]
          },
          {
            text: '红酒',
            value: 'c',
            children: [
              { text: '少量', value: '' },
              { text: '适中', value: '' },
              { text: '大量', value: '' }
            ]
          },
          {
            text: '均有',
            value: 'd',
            children: [
              { text: '少量', value: '' },
              { text: '适中', value: '' },
              { text: '大量', value: '' }
            ]
          }
        ]
      },
      {
        text: '3年',
        value: '1',
        children: [
          {
            text: '白酒',
            value: 'a',
            children: [
              { text: '少量', value: '' },
              { text: '适中', value: '' },
              { text: '大量', value: '' }
            ]
          },
          {
            text: '啤酒',
            value: 'b',
            children: [
              { text: '少量', value: '' },
              { text: '适中', value: '' },
              { text: '大量', value: '' }
            ]
          },
          {
            text: '红酒',
            value: 'c',
            children: [
              { text: '少量', value: '' },
              { text: '适中', value: '' },
              { text: '大量', value: '' }
            ]
          },
          {
            text: '均有',
            value: 'd',
            children: [
              { text: '少量', value: '' },
              { text: '适中', value: '' },
              { text: '大量', value: '' }
            ]
          }
        ]
      },
      {
        text: '4年',
        value: '1',
        children: [
          {
            text: '白酒',
            value: 'a',
            children: [
              { text: '少量', value: '' },
              { text: '适中', value: '' },
              { text: '大量', value: '' }
            ]
          },
          {
            text: '啤酒',
            value: 'b',
            children: [
              { text: '少量', value: '' },
              { text: '适中', value: '' },
              { text: '大量', value: '' }
            ]
          },
          {
            text: '红酒',
            value: 'c',
            children: [
              { text: '少量', value: '' },
              { text: '适中', value: '' },
              { text: '大量', value: '' }
            ]
          },
          {
            text: '均有',
            value: 'd',
            children: [
              { text: '少量', value: '' },
              { text: '适中', value: '' },
              { text: '大量', value: '' }
            ]
          }
        ]
      },
      {
        text: '5年',
        value: '1',
        children: [
          {
            text: '白酒',
            value: 'a',
            children: [
              { text: '少量', value: '' },
              { text: '适中', value: '' },
              { text: '大量', value: '' }
            ]
          },
          {
            text: '啤酒',
            value: 'b',
            children: [
              { text: '少量', value: '' },
              { text: '适中', value: '' },
              { text: '大量', value: '' }
            ]
          },
          {
            text: '红酒',
            value: 'c',
            children: [
              { text: '少量', value: '' },
              { text: '适中', value: '' },
              { text: '大量', value: '' }
            ]
          },
          {
            text: '均有',
            value: 'd',
            children: [
              { text: '少量', value: '' },
              { text: '适中', value: '' },
              { text: '大量', value: '' }
            ]
          }
        ]
      },
      {
        text: '6年',
        value: '1',
        children: [
          {
            text: '白酒',
            value: 'a',
            children: [
              { text: '少量', value: '' },
              { text: '适中', value: '' },
              { text: '大量', value: '' }
            ]
          },
          {
            text: '啤酒',
            value: 'b',
            children: [
              { text: '少量', value: '' },
              { text: '适中', value: '' },
              { text: '大量', value: '' }
            ]
          },
          {
            text: '红酒',
            value: 'c',
            children: [
              { text: '少量', value: '' },
              { text: '适中', value: '' },
              { text: '大量', value: '' }
            ]
          },
          {
            text: '均有',
            value: 'd',
            children: [
              { text: '少量', value: '' },
              { text: '适中', value: '' },
              { text: '大量', value: '' }
            ]
          }
        ]
      },
      {
        text: '7年',
        value: '1',
        children: [
          {
            text: '白酒',
            value: 'a',
            children: [
              { text: '少量', value: '' },
              { text: '适中', value: '' },
              { text: '大量', value: '' }
            ]
          },
          {
            text: '啤酒',
            value: 'b',
            children: [
              { text: '少量', value: '' },
              { text: '适中', value: '' },
              { text: '大量', value: '' }
            ]
          },
          {
            text: '红酒',
            value: 'c',
            children: [
              { text: '少量', value: '' },
              { text: '适中', value: '' },
              { text: '大量', value: '' }
            ]
          },
          {
            text: '均有',
            value: 'd',
            children: [
              { text: '少量', value: '' },
              { text: '适中', value: '' },
              { text: '大量', value: '' }
            ]
          }
        ]
      },
      {
        text: '8年',
        value: '1',
        children: [
          {
            text: '白酒',
            value: 'a',
            children: [
              { text: '少量', value: '' },
              { text: '适中', value: '' },
              { text: '大量', value: '' }
            ]
          },
          {
            text: '啤酒',
            value: 'b',
            children: [
              { text: '少量', value: '' },
              { text: '适中', value: '' },
              { text: '大量', value: '' }
            ]
          },
          {
            text: '红酒',
            value: 'c',
            children: [
              { text: '少量', value: '' },
              { text: '适中', value: '' },
              { text: '大量', value: '' }
            ]
          },
          {
            text: '均有',
            value: 'd',
            children: [
              { text: '少量', value: '' },
              { text: '适中', value: '' },
              { text: '大量', value: '' }
            ]
          }
        ]
      },
      {
        text: '9年',
        value: '1',
        children: [
          {
            text: '白酒',
            value: 'a',
            children: [
              { text: '少量', value: '' },
              { text: '适中', value: '' },
              { text: '大量', value: '' }
            ]
          },
          {
            text: '啤酒',
            value: 'b',
            children: [
              { text: '少量', value: '' },
              { text: '适中', value: '' },
              { text: '大量', value: '' }
            ]
          },
          {
            text: '红酒',
            value: 'c',
            children: [
              { text: '少量', value: '' },
              { text: '适中', value: '' },
              { text: '大量', value: '' }
            ]
          },
          {
            text: '均有',
            value: 'd',
            children: [
              { text: '少量', value: '' },
              { text: '适中', value: '' },
              { text: '大量', value: '' }
            ]
          }
        ]
      },
      {
        text: '10年',
        value: '1',
        children: [
          {
            text: '白酒',
            value: 'a',
            children: [
              { text: '少量', value: '' },
              { text: '适中', value: '' },
              { text: '大量', value: '' }
            ]
          },
          {
            text: '啤酒',
            value: 'b',
            children: [
              { text: '少量', value: '' },
              { text: '适中', value: '' },
              { text: '大量', value: '' }
            ]
          },
          {
            text: '红酒',
            value: 'c',
            children: [
              { text: '少量', value: '' },
              { text: '适中', value: '' },
              { text: '大量', value: '' }
            ]
          },
          {
            text: '均有',
            value: 'd',
            children: [
              { text: '少量', value: '' },
              { text: '适中', value: '' },
              { text: '大量', value: '' }
            ]
          }
        ]
      },
      {
        text: '10年以上',
        value: '',
        children: [
          {
            text: '白酒',
            value: 'a',
            children: [
              { text: '少量', value: '' },
              { text: '适中', value: '' },
              { text: '大量', value: '' }
            ]
          },
          {
            text: '啤酒',
            value: 'b',
            children: [
              { text: '少量', value: '' },
              { text: '适中', value: '' },
              { text: '大量', value: '' }
            ]
          },
          {
            text: '红酒',
            value: 'c',
            children: [
              { text: '少量', value: '' },
              { text: '适中', value: '' },
              { text: '大量', value: '' }
            ]
          },
          {
            text: '均有',
            value: 'd',
            children: [
              { text: '少量', value: '' },
              { text: '适中', value: '' },
              { text: '大量', value: '' }
            ]
          }
        ]
      }
    ]
  }
]
//吸烟史
const columne = [
  {
    text: '否',
    value: '',
    children: [{ text: '', value: '' }]
  },
  {
    text: '是',
    value: 'true',
    children: [
      {
        text: '1年',
        value: '1',
        children: [
          { text: '1根', value: '1' },
          { text: '2根', value: '2' },
          { text: '3根', value: '3' },
          { text: '4根', value: '4' },
          { text: '5根', value: '5' },
          { text: '6根', value: '6' },
          { text: '7根', value: '7' },
          { text: '8根', value: '8' },
          { text: '9根', value: '9' },
          { text: '10根', value: '10' },
          { text: '11根', value: '11' },
          { text: '12根', value: '12' },
          { text: '13根', value: '13' },
          { text: '14根', value: '14' },
          { text: '15根', value: '15' },
          { text: '16根', value: '16' },
          { text: '17根', value: '17' },
          { text: '18根', value: '18' },
          { text: '19根', value: '19' },
          { text: '20根', value: '20' },
          { text: '20根以上', value: '21' }
        ]
      },
      {
        text: '2年',
        value: '2',
        children: [
          { text: '1根', value: '1' },
          { text: '2根', value: '2' },
          { text: '3根', value: '3' },
          { text: '4根', value: '4' },
          { text: '5根', value: '5' },
          { text: '6根', value: '6' },
          { text: '7根', value: '7' },
          { text: '8根', value: '8' },
          { text: '9根', value: '9' },
          { text: '10根', value: '10' },
          { text: '11根', value: '11' },
          { text: '12根', value: '12' },
          { text: '13根', value: '13' },
          { text: '14根', value: '14' },
          { text: '15根', value: '15' },
          { text: '16根', value: '16' },
          { text: '17根', value: '17' },
          { text: '18根', value: '18' },
          { text: '19根', value: '19' },
          { text: '20根', value: '20' },
          { text: '20根以上', value: '21' }
        ]
      },
      {
        text: '3年',
        value: '3',
        children: [
          { text: '1根', value: '1' },
          { text: '2根', value: '2' },
          { text: '3根', value: '3' },
          { text: '4根', value: '4' },
          { text: '5根', value: '5' },
          { text: '6根', value: '6' },
          { text: '7根', value: '7' },
          { text: '8根', value: '8' },
          { text: '9根', value: '9' },
          { text: '10根', value: '10' },
          { text: '11根', value: '11' },
          { text: '12根', value: '12' },
          { text: '13根', value: '13' },
          { text: '14根', value: '14' },
          { text: '15根', value: '15' },
          { text: '16根', value: '16' },
          { text: '17根', value: '17' },
          { text: '18根', value: '18' },
          { text: '19根', value: '19' },
          { text: '20根', value: '20' },
          { text: '20根以上', value: '21' }
        ]
      },
      {
        text: '4年',
        value: '4',
        children: [
          { text: '1根', value: '1' },
          { text: '2根', value: '2' },
          { text: '3根', value: '3' },
          { text: '4根', value: '4' },
          { text: '5根', value: '5' },
          { text: '6根', value: '6' },
          { text: '7根', value: '7' },
          { text: '8根', value: '8' },
          { text: '9根', value: '9' },
          { text: '10根', value: '10' },
          { text: '11根', value: '11' },
          { text: '12根', value: '12' },
          { text: '13根', value: '13' },
          { text: '14根', value: '14' },
          { text: '15根', value: '15' },
          { text: '16根', value: '16' },
          { text: '17根', value: '17' },
          { text: '18根', value: '18' },
          { text: '19根', value: '19' },
          { text: '20根', value: '20' },
          { text: '20根以上', value: '21' }
        ]
      },
      {
        text: '5年',
        value: '5',
        children: [
          { text: '1根', value: '1' },
          { text: '2根', value: '2' },
          { text: '3根', value: '3' },
          { text: '4根', value: '4' },
          { text: '5根', value: '5' },
          { text: '6根', value: '6' },
          { text: '7根', value: '7' },
          { text: '8根', value: '8' },
          { text: '9根', value: '9' },
          { text: '10根', value: '10' },
          { text: '11根', value: '11' },
          { text: '12根', value: '12' },
          { text: '13根', value: '13' },
          { text: '14根', value: '14' },
          { text: '15根', value: '15' },
          { text: '16根', value: '16' },
          { text: '17根', value: '17' },
          { text: '18根', value: '18' },
          { text: '19根', value: '19' },
          { text: '20根', value: '20' },
          { text: '20根以上', value: '21' }
        ]
      },
      {
        text: '6年',
        value: '6',
        children: [
          { text: '1根', value: '1' },
          { text: '2根', value: '2' },
          { text: '3根', value: '3' },
          { text: '4根', value: '4' },
          { text: '5根', value: '5' },
          { text: '6根', value: '6' },
          { text: '7根', value: '7' },
          { text: '8根', value: '8' },
          { text: '9根', value: '9' },
          { text: '10根', value: '10' },
          { text: '11根', value: '11' },
          { text: '12根', value: '12' },
          { text: '13根', value: '13' },
          { text: '14根', value: '14' },
          { text: '15根', value: '15' },
          { text: '16根', value: '16' },
          { text: '17根', value: '17' },
          { text: '18根', value: '18' },
          { text: '19根', value: '19' },
          { text: '20根', value: '20' },
          { text: '20根以上', value: '21' }
        ]
      },
      {
        text: '7年',
        value: '7',
        children: [
          { text: '1根', value: '1' },
          { text: '2根', value: '2' },
          { text: '3根', value: '3' },
          { text: '4根', value: '4' },
          { text: '5根', value: '5' },
          { text: '6根', value: '6' },
          { text: '7根', value: '7' },
          { text: '8根', value: '8' },
          { text: '9根', value: '9' },
          { text: '10根', value: '10' },
          { text: '11根', value: '11' },
          { text: '12根', value: '12' },
          { text: '13根', value: '13' },
          { text: '14根', value: '14' },
          { text: '15根', value: '15' },
          { text: '16根', value: '16' },
          { text: '17根', value: '17' },
          { text: '18根', value: '18' },
          { text: '19根', value: '19' },
          { text: '20根', value: '20' },
          { text: '20根以上', value: '21' }
        ]
      },
      {
        text: '8年',
        value: '8',
        children: [
          { text: '1根', value: '1' },
          { text: '2根', value: '2' },
          { text: '3根', value: '3' },
          { text: '4根', value: '4' },
          { text: '5根', value: '5' },
          { text: '6根', value: '6' },
          { text: '7根', value: '7' },
          { text: '8根', value: '8' },
          { text: '9根', value: '9' },
          { text: '10根', value: '10' },
          { text: '11根', value: '11' },
          { text: '12根', value: '12' },
          { text: '13根', value: '13' },
          { text: '14根', value: '14' },
          { text: '15根', value: '15' },
          { text: '16根', value: '16' },
          { text: '17根', value: '17' },
          { text: '18根', value: '18' },
          { text: '19根', value: '19' },
          { text: '20根', value: '20' },
          { text: '20根以上', value: '21' }
        ]
      },
      {
        text: '9年',
        value: '9',
        children: [
          { text: '1根', value: '1' },
          { text: '2根', value: '2' },
          { text: '3根', value: '3' },
          { text: '4根', value: '4' },
          { text: '5根', value: '5' },
          { text: '6根', value: '6' },
          { text: '7根', value: '7' },
          { text: '8根', value: '8' },
          { text: '9根', value: '9' },
          { text: '10根', value: '10' },
          { text: '11根', value: '11' },
          { text: '12根', value: '12' },
          { text: '13根', value: '13' },
          { text: '14根', value: '14' },
          { text: '15根', value: '15' },
          { text: '16根', value: '16' },
          { text: '17根', value: '17' },
          { text: '18根', value: '18' },
          { text: '19根', value: '19' },
          { text: '20根', value: '20' },
          { text: '20根以上', value: '21' }
        ]
      },
      {
        text: '10年',
        value: '10',
        children: [
          { text: '1根', value: '1' },
          { text: '2根', value: '2' },
          { text: '3根', value: '3' },
          { text: '4根', value: '4' },
          { text: '5根', value: '5' },
          { text: '6根', value: '6' },
          { text: '7根', value: '7' },
          { text: '8根', value: '8' },
          { text: '9根', value: '9' },
          { text: '10根', value: '10' },
          { text: '11根', value: '11' },
          { text: '12根', value: '12' },
          { text: '13根', value: '13' },
          { text: '14根', value: '14' },
          { text: '15根', value: '15' },
          { text: '16根', value: '16' },
          { text: '17根', value: '17' },
          { text: '18根', value: '18' },
          { text: '19根', value: '19' },
          { text: '20根', value: '20' },
          { text: '20根以上', value: '21' }
        ]
      },
      {
        text: '10年以上',
        value: ' ',
        children: [
          { text: '1根', value: '1' },
          { text: '2根', value: '2' },
          { text: '3根', value: '3' },
          { text: '4根', value: '4' },
          { text: '5根', value: '5' },
          { text: '6根', value: '6' },
          { text: '7根', value: '7' },
          { text: '8根', value: '8' },
          { text: '9根', value: '9' },
          { text: '10根', value: '10' },
          { text: '11根', value: '11' },
          { text: '12根', value: '12' },
          { text: '13根', value: '13' },
          { text: '14根', value: '14' },
          { text: '15根', value: '15' },
          { text: '16根', value: '16' },
          { text: '17根', value: '17' },
          { text: '18根', value: '18' },
          { text: '19根', value: '19' },
          { text: '20根', value: '20' },
          { text: '20根以上', value: '21' }
        ]
      }
    ]
  }
]
const fieldValuea = ref('')
const fieldValueb = ref('')
const fieldValuec = ref('')
const fieldValued = ref('')
const fieldValuee = ref('')
const showPickera = ref(false)
const showPickerb = ref(false)
const showPickerc = ref(false)
const showPickerd = ref(false)
const showPickere = ref(false)
const pickerValuea = ref<any>([])
const pickerValueb = ref<any>([])
const pickerValuec = ref<any>([])
const pickerValued = ref<any>([])
const pickerValuee = ref<any>([])
const onConfirma = ({ selectedValues, selectedOptions }) => {
  showPickera.value = false
  pickerValuea.value = selectedValues
  fieldValuea.value = selectedOptions[0].text
}
const onConfirmb = ({ selectedValues, selectedOptions }) => {
  showPickerb.value = false
  pickerValueb.value = selectedValues
  fieldValueb.value = selectedOptions[0].text
}
const onConfirmc = ({ selectedValues, selectedOptions }) => {
  showPickerc.value = false
  pickerValuec.value = selectedValues
  fieldValuec.value = selectedOptions[0].text
}
const onConfirmd = ({ selectedValues, selectedOptions }) => {
  showPickerd.value = false
  pickerValued.value = selectedValues
  fieldValued.value = selectedOptions[0].text
}
const onConfirme = ({ selectedValues, selectedOptions }) => {
  showPickere.value = false
  pickerValuee.value = selectedValues
  fieldValuee.value = selectedOptions[0].text
}
const abmi = BMI.value
const addc = () => {
  localStorage.setItem('name', name.value)
  localStorage.setItem('gender', gender.value)
  localStorage.setItem('phone', phone.value)
  localStorage.setItem('height', height.value)
  localStorage.setItem('weight', weight.value)
  localStorage.setItem('bmi', abmi)
  localStorage.setItem('relation', fieldValuea.value)
  localStorage.setItem('birth', JSON.stringify(pickerValueb.value))
  localStorage.setItem('waist size', fieldValuec.value)
  localStorage.setItem('drink', fieldValued.value)
  localStorage.setItem('smoke', fieldValuee.value)
  localStorage.setItem('card', value.value)
  setTimeout(() => {
    router.go(-1)
  }, 1500)
}
</script>

<style>
html {
  background: #f5f5f5;
  overflow-x: hidden;
  overflow-y: auto;
  width: 100%;
  height: 100%;
  font-size: 14px;
  color: #333;
  padding: 0;
  margin: 0;
  box-sizing: border-box;
}
.health-record {
  background-color: white;
  width: 100%;
  height: 100%;
  line-height: normal;
}

.eri {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 20px;
  margin-top: 20px;
  width: 100%;
  height: 10px;
  line-height: 10px;
}

.header {
  width: 100%;
  height: 50px;
  line-height: 50px;
  background-color: white;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px;
  box-sizing: border-box;
}

.back-arrow {
  font-size: 20px;
  color: #333;
  cursor: pointer;
}

.title {
  font-size: 18px;
  font-weight: bold;
}

.save-button {
  color: green;
  font-size: 16px;
  cursor: pointer;
}

.content {
  overflow: hidden;
}

.section-title {
  font-size: 14px;
  font-weight: bold;
  margin-bottom: 10px;
  color: #333;
  padding: 0 15px;
  box-sizing: border-box;
}

.item {
  display: flex;
  justify-content: space - between;
  align-items: center;
  margin-bottom: 10px;
  margin-top: 10px;
  width: 100%;
  height: 10px;
  line-height: 10px;
}

.label {
  width: 40%;
  font-size: 14px;
  font-weight: 500;
  margin-left: 15px;
}

.van-field__control {
  display: block;
  box-sizing: border-box;
  width: 100%;
  margin: 0;
  padding: 0;
  color: var(--van-field-input-text-color);
  line-height: inherit;
  text-align: right;
  background-color: transparent;
  resize: none;
  -webkit-user-select: auto;
  user-select: auto;
}

.input-placeholder {
  width: 100%;
  color: gray;
  text-align: right;
  border: none;
  background: white;
  font-size: 14px;
  display: flex;
  justify-content: flex-end;
  align-items: center;
  margin-right: 10px;
  height: 30px;
  line-height: 30px;
}

.input-description {
  width: 100%;
  color: gray;
  text-align: right;
  border: none;
  background: white;
  font-size: 14px;
  margin-right: 10px;
  height: 30px;
  line-height: 30px;
}

.gender-item {
  width: 100%;
  height: 40px;
  line-height: 40px;
  display: flex;
  justify-content: space-between;
}

.gender-option {
  margin-right: 10px;
  width: 50%;
  height: 40px;
  line-height: 40px;
  text-align: right;
  font-size: 14px;
  font-weight: bold;
  color: gray;
  cursor: pointer;
  border: none;
  background: white;
  display: flex;
  justify-content: flex-end;
  align-items: center;
}

.box {
  width: 100%;
  height: 20px;
  background: whitesmoke;
  line-height: 20px;
  text-align: left;
  font-size: 14px;
  color: black;
}

.opt-section {
  margin-top: 20px;
}

.dr {
  width: 100%;
  height: 400px;
  margin-bottom: 10px;
  margin-top: 10px;
  .re {
    width: 100%;
    height: 70px;
    line-height: 30px;
    text-align: left;
  }
}
.dr .re span {
  background: #f4f4f4;
  color: black;
  border-radius: 20px;
  text-align: center;
  margin-left: 20px;
  cursor: pointer;
  margin-top: 10px;
  margin-bottom: 10px;
  display: inline-block;
  width: 60px;
  height: 20px;
  line-height: 20px;
}
.dt {
  width: 100%;
  margin-bottom: 10px;
  margin-top: 40px;
  position: relative;
  bottom: 40px;
}
.dt .res {
  width: 100%;
  height: 320px;
  line-height: 30px;
  margin-top: 20px;
}
.dt .res span {
  background: #f4f4f4;
  color: black;
  border-radius: 20px;
  text-align: center;
  margin-left: 20px;
  cursor: pointer;
  margin-top: 10px;
  margin-bottom: 10px;
  display: inline-block;
  width: 60px;
  height: 20px;
  line-height: 20px;
}
h4 {
  margin: 10px;
  font-size: 12px;
  font-weight: bold;
  color: #333;
  padding: 0;
  box-sizing: border-box;
  text-align: left;
}
</style>
